<template>
    <div>
        <div class="layout">
            <a-form
                class="login-form"
                :model="formState"
                name="basic"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 16 }"
                autocomplete="off"
                @finish="onFinish"
                @finishFailed="onFinishFailed"
            >
                <a-form-item label="用户名" name="username">
                    <a-input v-model:value="formState.username" />
                </a-form-item>

                <a-form-item label="密码" name="password">
                    <a-input-password v-model:value="formState.password" />
                </a-form-item>

                <a-form-item
                    name="remember"
                    :wrapper-col="{ offset: 8, span: 16 }"
                >
                    <a-checkbox v-model:checked="formState.remember"
                        >记住密码</a-checkbox
                    >
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button type="primary" html-type="submit">登录</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script setup>
import router from '@/router';
import { message } from 'ant-design-vue';
import { reactive } from 'vue';
import { $endApi } from "@/api/base/index";
import { useUserStore } from '@/Store/userStore.ts';

const formState = reactive({
    username: '',
    password: '',
    remember: true
});

const userStore = useUserStore();

const onFinish = async (values) => {
    try {
        const res = await $endApi.v1.user.user.login({
            username: formState.username,
            password: formState.password,
        });
        if(res.success){
            userStore.login({
                ...res.data,
            })
            router.push({ name: 'index' });
            message.success('登录成功');
        } else {
            message.error('登陆失败');
        }
    } catch {
      message.error('登陆失败');
    }
    
};

const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
};
</script>

<style lang="scss" scoped>
.layout {
    width: 508px;
    height: 322px;
    background: url('@/assets/icons/bgLogin.png') no-repeat center / contain;
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 10;
    .login-form {
        width: 329px;
        height: 161px;
        transform: translate(-12px, -28px);

        :deep(.ant-form-item-label > label, ) {
            color: $text-primary !important;
        }
        :deep(.ant-checkbox-wrapper) {
            color: $text-primary !important;
        }

        // :where(.css-dev-only-do-not-override-19iuou) ;
    }
}
</style>
